<template>
    <div class="itm">
        <div class="head">
            <a :data-user-id="userId" :href="userRoute">
                <img :src="imgUrl">
            </a>
        </div>
        <div class="cntwrap">
            <div>
                <div class="cnt f-brk">
                    <a :data-user-id="userId" :href="userRoute" class="s-fc7">{{ name }}</a>
                    <img v-if="isMusician" :src="musicianImgUrl" style="margin-right: 5px; vertical-align: -2px;"
                        width="13" height="13">
                    <img v-if="isVip" :src="vipImgUrl" class="brand-tag brand-vip">
                    {{ content }}
                </div>
            </div>
            <div class="rp">
                <div class="time s-fc4">{{ time }}</div>
                <span class="dlt">
                    <span style="display: none;" class="s-fc3">
                        <a href="javascript:void(0)">删除</a>
                        <span class="sep">|</span>
                    </span>
                </span>
                <a href="javascript:void(0)">
                    <i class="zan u-icn2 u-icn2-good"></i>
                     ({{ goodNum }})
                </a>
                <span class="sep">|</span>
                <a href="javascript:void(0)" class="s-fc3">
                    回复
                </a>
            </div>
        </div>
    </div>
</template>
<script setup>
import { isTemplateExpression } from 'typescript';

defineProps({
    "name": String,
    "content": String,
    "userRoute": String,
    "imgUrl": String,
    "userId": String,
    "time": String,
    "isVip": Boolean,
    "isMusician": Boolean,
    "vipImgUrl": String,
    "musicianImgUrl": String,
    "goodNum": Number
})
</script>
<style lang="scss" scoped>
.itm {
    padding: 15px 0;
    border-top: 1px dotted #ccc;
}

.head {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: -100px;

    img {
        float: left;
        width: 50px;
        height: 50px;
        margin-right: -100px;
    }
}

img {
    vertical-align: middle;
}

.cntwrap {
    margin-left: 60px;

    .s-fc7 {
        margin-right: 5px;
    }

    .brand-tag {
        margin-right: 5px;
        vertical-align: -1px;
    }

    .brand-vip{
        height: 12px;
    }

    .rp {
        margin-top: 15px;
        text-align: right;

        .time {
            float: left;
            margin: 0 !important;
        }

        .dlt {
            display: none;
        }

    }

    .u-icn2 {
        margin-right: 5px;
        vertical-align: -2px;
        display: inline-block;
        overflow: hidden;
    }

    .u-icn2-good {
        width: 15px;
        height: 14px;
        background-position: -150px 0;
    }

}

.cnt {
    width: 100%;
    overflow: hidden;
    line-height: 20px;

}


.sep {
    margin: 0 8px;
    color: #ccc;
}

.zan {
    margin-top: -4px;
}
</style>